<template>
	<div id="SubpageBannerAndTitle">
		<div id="SubpageBanner">
			<img :src="Bannerimageurl" alt="" />
		</div>
		<div id="SubpageTitle" class="NavigationBar w1200">
			<div class="path">
				<span class="home" @click="toHome">
					<i class="iconfont icon-home"></i>
					首页
				</span>
				>
				<span>{{ this.Title }}</span>
			</div>
			<ul class="categoryList">
				<li
					v-for="(items, li) in TitleList"
					:key="li"
					@click="
						gotopage(
							(urls = items.urls),
							(Markdowns = items.Markdowns),
							(Picturelist = items.Picturelist),
							(cards = items.cards),
							(sort = items.sort)
						)
					"
				>
					{{ items.text }}
				</li>
			</ul>
		</div>
	</div>
</template>
<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import axios from 'axios'
import {PagesJump} from '@/utils'
export default {
	// import引入的组件需要注入到对象中才能使用
	components: {},
	props: {Bannerimageurl: String, Title: String, length: Number},
	data() {
		// 这里存放数据
		return {TitleList: Array}
	},
	computed: {}, // 计算属性 类似于data概念
	watch: {}, // 监控data中的数据变化
	methods: {
		toHome() {
			this.$router.push({name: 'Home'})
		},
		gotopage(urls, Markdowns, Picturelist, cards, sort) {
			PagesJump(urls, Markdowns, Picturelist, cards, sort)
		},
		getTitleInfo() {
			axios.get('/api/home').then(res => {
				res = res.data
				if (res.ret && res.data) {
					const data = res.data
					this.TitleList = data.WebSiteArchitecture[this.length].slice(1)
				}
			})
		}
	}, // 方法集合
	created() {}, // 生命周期 - 创建完成（可以访问当前this实例）
	mounted() {
		this.getTitleInfo()
	}, // 生命周期 - 挂载完成（可以访问DOM元素）
	beforeCreate() {}, // 生命周期 - 创建之前
	beforeMount() {}, // 生命周期 - 挂载之前
	beforeUpdate() {}, // 生命周期 - 更新之前
	updated() {}, // 生命周期 - 更新之后
	beforeDestroy() {}, // 生命周期 - 销毁之前
	destroyed() {}, // 生命周期 - 销毁完成
	activated() {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="less" scoped>
#SubpageBannerAndTitle {
	#SubpageBanner {
		width: 100%;
		aspect-ratio: 192/35;
		margin: 0 auto;
		img {
			width: 100%;
			height: 100%;
		}
	}
	.NavigationBar {
		height: 80px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		.categoryList {
			display: flex !important;
			li {
				margin-left: 30px;
				font-size: 15px;
			}
		}
		.path {
			.home {
				color: rgb(44, 123, 211);
			}
		}
	}
}
</style>
